<template>
  <div class="question">
    <div class="question-container">
      <!-- 头部  头图 -->

      <!-- (红框 (浅黄,(abcd)) )-->
      <div class="main">
        <div class="jiang_answer"></div>
        <h3 class="title">{{ num + '、' + question?.question }}</h3>
        <div class="list">
          <button
            :disabled="disabled"
            @click="handleClick(index, question?.question_id)"
            v-for="(item, index) in question?.answer_list"
            :key="item"
            :class="`item item-${index}`"
            :style="{ color: answerIndex === index ? color : '' }"
          >
            {{ item }}
          </button>
        </div>
      </div>
      <div class="bottom">
        <!-- <span>*回答正确</span> -->
        <button :disabled="disabled" class="submit" @click="submit" />
        <span v-if="show">
          <!-- 查看正确答案按钮 -->
          <button v-if="check" @click="checkBtn" class="check-btn"></button>
          <!-- 下一题按钮 -->
          <button v-else class="next-btn" @click="nextBtn"></button>
        </span>
      </div>
    </div>
    <!-- <van-share-sheet v-model="showShare" title="一键分享" :options="options" /> -->
    <!-- dialog对话框 -->
    <van-share-sheet
      title="一键分享"
      v-model="showShare"
      :options="options"
      cancel-text=""
      @select="onSelect"
    />
  </div>
</template>

<script>
import { reqgetQuestion, reqgetQuestionLog } from '@/apis/home'
import { Dialog } from 'vant'
import axios from 'axios'
export default {
  name: 'HomePages',
  data() {
    return {
      color: 'blue',
      disabled: false,
      showShare: false,
      answerIndex: null,
      question_list: [], // 问题列表
      list: [], // 问题列表
      check: false, // 回答错误显示
      show: false,
      num: 1, // 当前题目的序号第几道题
      index: 0, // 当前答案的索引
      id: '', // 当前题目的id
      options: [
        { name: '微信', icon: 'wechat', href: 'weixin://' },
        { name: '微博', icon: 'weibo', href: 'https://www.baidu.com' }
      ]
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  computed: {
    question() {
      return (
        this.question_list[0] || {
          question_id: 1,
          question: 'x而我突然有人同意滚很符',
          answer_list: ['A', 'B', 'C', 'D'],
          right_answer_index: 2,
          reason: 'xxxxx解析'
        }
      )
    }
  },
  methods: {
    onSelect(option) {
      // this.$toast(option.name)
      // console.log(option)
      window.location.href = option.href
      // this.showShare = false
    },
    async init() {
      // 1. 请求题目
      // 2. 请求答案
      // 3. 请求正确答案
      try {
        const res = await reqgetQuestion()
        console.log(res)
        if (res.status !== 200) return
        // console.log(res.data.data)
        const data = res.data.data
        console.log(data)
        if (data.have_prize == '2') {
          // this.$toast('活动结束')
          Dialog.alert({
            message: '活动结束',
            theme: 'round-button'
          }).then(() => {
            // 跳转到banner页
          })
          // this.$router.push('/prize')
        } else {
          this.question_list = this.list = res.data.data.question_list
        }
      } catch (error) {
        console.error(error)
      }
    },
    formatAnswer(val) {
      return val === 0 ? 'A' : val === 1 ? 'B' : val === 2 ? 'C' : 'D'
    },
    /**
     * 选中答案
     * @param {Number} index 答案索引  id 问题id
     * this.question.right_answer_index  正确答案索引
     */
    handleClick(index, id) {
      this.color = 'blue'
      this.answerIndex = this.index = index
      this.id = id
      console.log(
        '当前选择中答案下标',
        index,
        '当前题目id',
        id,
        '正确答案下标',
        this.question.right_answer_index
      )

      // if (index === this.question.right_answer_index) {
      //   //  正确的
      //   this.$toast('回答正确')
      // } else {
      //   //  错误的
      // }
    },
    // 提交到哪
    async submit() {
      if (this.answerIndex === null) {
        Dialog.alert({
          message: '请选择答案!',
          theme: 'round-button'
        }).then(() => {})
        return
      }
      this.disabled = true // 禁用按钮
      this.show = true // 显示查看   正确答案/下一题 按钮
      // 答题日志
      // if (this.show) {
      //   try {
      //     const res = await reqgetQuestionLog({
      //       question_id: this.id,
      //       answer_index: this.index,
      //       question_index: this.num
      //     })
      //     console.log(res, '111111')
      //   } catch (error) {
      //     console.error(error)
      //     return Dialog.alert({
      //       // className: 'failed-dialog',
      //       message: '答题日志有问题',
      //       theme: 'round-button'
      //     }).then(() => {
      //       this.$router.back()
      //     })
      //   }
      // }
      const res = await axios.post('/api/user') // 假接口答题日志
      // console.log(res.data)
      if (res.data.have_prize !== 1) {
        if (this.num >= 5) {
          Dialog.alert({
            className: 'failed-dialog',
            theme: 'round-button'
          }).then(() => {
            this.$router.back()
          })
          // return this.$toast('答题结束,可以去领奖')
          this.show = false
          this.check = false
          // 判断有无奖励, 跳转到领奖页面
          return
        }

        this.show = false
        this.check = false
        Dialog.alert({
          message: '活动结束',
          theme: 'round-button'
        }).then(() => {
          // 跳转到banner页
          this.$router.back()
        })
      } else {
        if (this.index === this.question.right_answer_index) {
          //  正确的
          this.color = 'green'

          this.show = true
          this.check = false
          this.$toast('回答正确')
          if (this.num >= 5) {
            Dialog.alert({
              className: 'award-dialog',
              theme: 'round-button'
            }).then(() => {
              // 领取成功  => 发请求,领优惠券 跳转到首页
              this.$router.back()
            })
            // return this.$toast('答题结束,可以去领奖')
            this.show = false
            this.check = false
            // 判断有无奖励, 跳转到领奖页面
          } else {
            // this.question_list.shift() // 删除第一个元素
            // 请求 答题日志
            // const res = await reqgetQuestionLog({
            //   question_id: this.id,
            //   answer_index: this.index,
            //   question_index: this.num
            // })
            // console.log(res)
            // 假接口
          }
        } else {
          //  错误的

          this.color = 'red'

          this.$toast('回答错误')
          this.show = true
          this.check = true
          // this.num = 1
          // 重新请求题目  =>需要他点击正确答案,才能请求 (分析=>可以继续答题)
          // this.init()
        }
      }
    },
    // 下一题
    nextBtn() {
      this.color = 'blue'

      this.answerIndex = null
      this.num++
      this.show = false
      this.check = false
      this.disabled = false

      this.question_list.shift() // 删除第一个元素
      // this.answerIndex = null
    },
    // 查看正确答案
    checkBtn() {
      // this.dialogVisible = true
      this.color = 'blue'

      // this.answerIndex = this.question.right_answer_index
      this.check = false
      this.show = false
      this.disabled = false
      this.answerIndex = null
      // 弹窗
      Dialog.alert({
        className: 'warning-dialog',
        message: `真确答案：${this.formatAnswer(this.question.right_answer_index)}\n解析：${
          this.question.reason.split('：')[1]
        }`,
        theme: 'round-button'
      }).then(() => {
        // 领取成功  => 发请求,领优惠券 跳转到首页
        // this.$router.back()
        // <van-cell title="显示分享面板" @click="showShare = true" />
        this.showShare = true
      })
    }
  }
}
</script>

<style scoped lang="less">
// @base: 24px;
.question {
  min-height: 100vh;
  // background-color: #f9a335;
  background: url('@/assets/images/answer_bgc.png') no-repeat top;
  background-size: 100% 100%;
  // background-size: contain;
  // 横向背景图100% 大小
  // overflow: auto;
  button {
    border: none;
    margin: 0;
  }
  &-container {
    width: 100vw;
    // height: 100vh;

    .main {
      padding-top: 36.5vh;
      color: #fff;
      .jiang_answer {
        height: 62px;
        background: url('@/assets/images/jiang_answer.png') no-repeat center;
        background-size: contain;
      }
      .title {
        padding: 3vh 2vh;
        height: 10vh;
        font-size: 18px;
        line-height: 1.2;
      }
      .list {
        // margin-top: 1rem;
        // padding: 16px 80px 0;
        height: 18vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;

        .item {
          // margin-top: 1vh;
          font-size: 14px;
          width: 265px;
          // height: 3vh;
          line-height: 20px;

          &.item-0 {
            background: url('@/assets/images/A@2x.png') no-repeat;
            background-size: 100% 100%;
          }

          &.item-1 {
            background: url('@/assets/images/B@2x.png') no-repeat;
            background-size: 100% 100%;
          }

          &.item-2 {
            background: url('@/assets/images/C@2x.png') no-repeat;
            background-size: 100% 100%;
          }

          &.item-3 {
            background: url('@/assets/images/D@2x.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
    .bottom {
      margin-top: 30px;
      // position: relative;

      .submit {
        // margin-top: 20px;
        width: 7rem;
        height: 1.6rem;
        background: url('@/assets/images/notarize_btn.png') no-repeat;
        background-size: contain;
        margin: 0 auto;
      }
      span button {
        position: fixed;
        bottom: -40px;
        right: 10px;
        width: 200px;
        height: 3rem;
        &.check-btn {
          background: url('@/assets/images/lock_answer.png') no-repeat;
          background-size: contain;
          margin: 0 auto;
          // margin-top: 0.9rem;
        }
        &.next-btn {
          background: url('@/assets/images/next_btn.png') no-repeat;
          background-size: contain;
          margin: 0 auto;
          margin-top: 0.9rem;
        }
      }
    }
  }
  :deep(.van-share-sheet__options) {
    justify-content: center;
  }
}
.body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: -1;
}
.option {
  text-align: center;
  position: relative;
}
.footer {
  display: flex;
  justify-content: center;
}
.footer img {
  background-color: #fab65f;
  position: relative;
  bottom: -14.5rem;
}
.check {
  display: flex;
  justify-content: right;
  position: relative;
  padding-right: 1rem;
  bottom: -15rem;
}
</style>
<style lang="less">
.award-dialog {
  position: fixed;
  top: 45%;
  left: 50%;
  width: 15rem;
  height: 19rem;
  // background-color: transparent;
  background: url('@/assets/images/完成答题弹窗@2x.png') no-repeat;
  background-size: contain;
  .van-dialog__footer {
    position: absolute;
    bottom: 0;

    background-color: transparent;
    .van-button {
      color: transparent;
      background: url('@/assets/images/确定按钮@2x.png') no-repeat;
      background-size: contain;
      // 图片位置
      background-position: center;
      height: 1.6rem;
      .van-button__content {
        .van-button__text {
          display: none;
        }
      }
    }
  }
}
.failed-dialog {
  position: fixed;
  top: 45%;
  left: 50%;
  width: 15rem;
  height: 9rem;
  .van-goods-action-button--danger {
    background-color: transparent !important;
    &::after {
      content: 'x';
      height: 1.6rem;
      width: 1.6rem;
      display: inline-block;
    }
  }
  // background-color: transparent;
  background: url('@/assets/images/无奖品弹窗@2x.png') no-repeat;
  background-size: contain;
  .van-dialog__footer {
    position: absolute;
    top: 0;
    right: 0;
    background-color: pink;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    &::after {
      content: 'x';
      height: 1.6rem;
      width: 1.6rem;
      display: inline-block;
    }
    .van-button {
      // display: none;
      color: transparent;
      .van-button__content {
        display: none;
        .van-button__text {
        }
      }
    }
  }
}
.warning-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 8rem;
  height: 10rem;
  // background-color: transparent;
  background: url('@/assets/images/warning_dia.png') no-repeat;
  background-size: contain;
  .van-dialog__content {
    position: relative;
    top: 50%;
    left: 0;
    .van-dialog__message {
      padding-top: 0;
      text-align: start;
      color: #f9a335;
      font-weight: 700;
    }
  }
  .van-dialog__footer {
    position: absolute;
    bottom: 0;
    background-color: transparent;
    .van-button {
      color: transparent;
      background: url('@/assets/images/share_btn.png') no-repeat;
      background-size: contain;
      // 图片位置
      background-position: center;
      height: 1.6rem;
      .van-button__content {
        .van-button__text {
          display: none;
        }
      }
    }
  }
}
</style>
